<template>
    <a-layout>
        <a-layout-sider class="sider" theme="light">
            <div class="logo">
                MY SYSTEM
            </div>
            <Menus></Menus>
        </a-layout-sider>
        <a-layout>
            <a-layout-header>
            <a-dropdown>
<!--              <a-radio-group v-model:value="locale" button-style="solid" @change="changeLang">-->
<!--                <a-radio-button value="en">English</a-radio-button>-->
<!--                <a-radio-button value="zhCN">中文</a-radio-button>-->
<!--              </a-radio-group>-->
             <img class="lang" src="@/assets/svgs/lang.svg" />
              <template #overlay>
                <a-menu @click="changeLang">
                  <a-menu-item key="zhCN">
                    中文
                  </a-menu-item>
                  <a-menu-item key="en">
                    English
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>

                <header-user></header-user>
            </a-layout-header>
            <a-layout-content>
                <div class="content">
                    <RouterView></RouterView>
                </div>
            </a-layout-content>
            <a-layout-footer>&copy;All Rights Reserved</a-layout-footer>
        </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import HeaderUser from './components/header-user.vue';
import Menus from './components/memus.vue';
import {ref} from "vue";
import {useI18n} from "vue-i18n";
import i18n from '@/locales';

const { t } = useI18n();
const locale: any = ref(i18n.global.locale);

const changeLang = ({key}: any) => {
  locale.value = key;
}
</script>

<style lang="less" scoped>
.sider {
    height: 100vh;
    .logo {
        height: 50px;
        line-height: 50px;
        font-size: 26px;
        font-weight: bolder;
        text-align: center;
        font-family: '个性字体';
        color: @primary-color;
    }
}
.lang {
  margin-right: 10px;
  width: 20px;
  cursor: pointer
}
.content {
    padding: 10px;
    padding-bottom: 0;
    background-color: #f0f2f5;
    height: calc(100vh - 150px);
}
.ant-layout-header {
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;

}
.ant-layout-content {
    background: #fff;
  height: calc(100vh - 90px);
  overflow: hidden;
}
.ant-layout-footer {
    padding: 8px 50px;
    font-size: 12px;
    color: #707070;
    text-align: center;
}


</style>
